<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .bigImg{width: 350px;height: 450px;position: relative;}
    .bigImg .m_box{width: 350px;height: 350px;position: relative;}
    .bigImg .m_box span{position: absolute;left:0;top:0;background: rgba(255,0,0,0.5);display: none;}
    .bigImg .m_box em{width: 100%;height:100%;position: absolute;left:0;top:0;z-index: 1;}
    .bigImg .l_box{position: absolute;width: 350px;height:350px;left: 380px;top:0;overflow: hidden;display: none;}
    .bigImg .l_box img{position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="bigImg">
    <div class="m_box">
      <img src="../imgs/m0.jpg" alt="">
      <span></span>
      <em></em>
    </div>
    <div class="l_box">
      <img src="../imgs/l0.jpg" alt="">
    </div>
  </div>
</body>
<script>

  // 所有的比例计算，参考day01，向日葵班和玫瑰班的案例

  // 选择元素
  var mBox = $(".m_box");
  var lBox = $(".l_box");
  var mSpan = $(".m_box span");
  var lImg = $(".l_box img");

  // 鼠标进入左侧容器
  mBox.onmouseover = function(){
    // 显示遮罩层和右侧容器
    mSpan.style.display = "block";
    lBox.style.display = "block";

    // 根据右侧大图显示的比例，计算左侧遮罩层的尺寸
    mSpan.style.width = lBox.offsetWidth / lImg.offsetWidth * mBox.offsetWidth + "px";
    mSpan.style.height = lBox.offsetHeight / lImg.offsetHeight * mBox.offsetHeight + "px";
  }
  // 鼠标离开左侧容器
  mBox.onmouseout = function(){
    // 隐藏
    mSpan.style.display = "none";
    lBox.style.display = "none";
  }
  // 鼠标在左侧容器移动
  mBox.onmousemove = function(eve){
    var e = eve || window.event;
    // 计算相对于左侧容器的坐标 - 遮罩层的一半（保证鼠标在遮罩层中间）
    var l = e.offsetX - mSpan.offsetWidth/2;
    var t = e.offsetY - mSpan.offsetHeight/2;
    // 提前计算遮罩层能移动的最大距离
    var maxW = mBox.offsetWidth-mSpan.offsetWidth;
    var maxH = mBox.offsetHeight-mSpan.offsetHeight;
    // 边界限定
    if(l < 0) l = 0;
    if(t < 0) t = 0;
    if(l > maxW) l = maxW;
    if(t > maxH) t = maxH;
    // 将计算好的距离设置给遮罩层
    mSpan.style.left = l + "px"
    mSpan.style.top = t + "px"
    // 根据遮罩层移动的比例，计算右侧大图要移动的距离（注意正反）
    lImg.style.left = -l / maxW * (lImg.offsetWidth - lBox.offsetWidth) + "px";
    lImg.style.top = -t / maxH * (lImg.offsetHeight - lBox.offsetHeight) + "px";
  }


  // 选择器的封装（偷懒）
  function $(s){
    return document.querySelector(s);
  }
  
</script>
</html>